<template>
  <div v-auto-max-height
       v-auto-height="-65">
    <mk-col-box :mode="1">
      <el-col :span="6">
        <mk-card v-loading="ui.loading_1">
          <div slot="header">
            <mk-button :type="5"
                       @click="add">新增角色</mk-button>
          </div>

          <cp-resource-form v-if="ui.add || ui.edit"
                            @close="close"
                            :row="editRow"
                            :is-add="ui.add"
                            :title="ui.title"
                            btn-name="保存" />

          <el-tree :data="roles"
                   node-key="id"
                   default-expand-all
                   @node-click="choose"
                   v-auto-height="-65"
                   :expand-on-click-node="false">
            <span slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="data.id !== '000'">
                <mk-button :type="4"
                           @click="edit(data)">编辑</mk-button>
                <mk-button :type="4"
                           confirm-text="确定删除该角色?"
                           @click="del(data)">删除</mk-button>
              </span>
            </span>
          </el-tree>

        </mk-card>
      </el-col>
      <el-col :span="6">
        <resource-tree ref="resourcetree"
                       v-if="ui.resVif"
                       :selected-res="selectedRes">
        </resource-tree>
      </el-col>
    </mk-col-box>
    <mk-bottom-box align="right">
      <mk-button :type="2"
                 @click="save">提交</mk-button>
    </mk-bottom-box>
  </div>
</template>


<script>
import { MkBase } from 'element-ui'
import ResourceTree from '@/views/cp-resource'
import treeGener from 'element-ui/lib/utils/mk-business-util'
import CpResourceForm from './tree/form'

export default {
  mixins: [MkBase],
  data () {
    return {
      selectedRole: null,
      roles: [],
      ui: {
        busying: true,
        loadText: '加载中',
        add: false,
        edit: false,
        title: '',
        resVif: true
      },
      editRow: null,
      selectedRes: []
    }
  },
  async mounted () {
    await this.load()
  },
  methods: {
    load: async function () {
      try {
        this.ui.busying = true
        let data = await this.$get('/cpSsorole/list.json')
        if (data && data.length > 0) {
          treeGener({
            source: data,
            key: 'roleid',
            label: 'rolename',
            children: 'list'
          })
        }
        this.roles = data
      } catch (e) {
        alert(e.message)
      }
      this.ui.busying = false
    },
    add (row) {
      this.ui.title = '新建'
      this.editRow = null
      this.ui.add = true
    },
    edit (row) {
      this.ui.title = '编辑'
      this.editRow = row
      this.ui.edit = true
    },
    async close (reload) {
      this.ui.add = false
      this.ui.edit = false
      if (reload === true) {
        await this.load()
      }
    },
    del: async function (obj) {
      this.ui.busying = true
      let result = await this.$delete(
        `/cpSsorole/${obj.roleid}/del.json`
      )
      if (result) {
        this.selectedRole = null
        await this.load()
      }
      this.ui.busying = false
    },
    choose: async function (data, node, comp) {
      this.ui.busying = true
      this.ui.resVif = false
      this.selectedRole = data
      try {
        let list = await this.$get('/cpResource/ssoroleResourceTree.json', {
          roleid: data.roleid
        })
        let arr = []
        for (let i in list) {
          if (list[i] && list[i].resourceid) {
            arr.push(list[i].resourceid)
          }
        }
        this.selectedRes = arr
      } catch (e) {
      }
      this.ui.busying = false
      this.ui.resVif = true
    },
    save: async function () {
      if (!this.selectedRole.roleid) {
        this.$message({ message: '请先选择您要分配资源的角色', type: 'warning' })
        return
      }
      let resources = this.$refs.resourcetree.getCheckedKeys()

      if (resources.length == 0) {
        this.$message({ message: '请先选择您要给角色分配的资源', type: 'warning' })
        return
      }
      if (resources[0] === '000') {
        resources.splice(0, 1)
      }
      try {
        let result = await this.$post(
          '/cpSsorole/saveSsoroleResource.json',
          {
            roleid: this.selectedRole.roleid,
            resourceidList: resources
          }
        )
        if (result) {
          this.$message({ message: '资源分配成功', type: 'success' })
        }
      } catch (error) {}
    }
  },
  components: {
    ResourceTree,
    CpResourceForm
  }
}
</script>
